<template>
  <div class="header-panda">
    <search-input v-searchshow></search-input>
    <div class="nav">
      <router-link :to="firstPath"  tag="div" class="today home-nav-item" activeClass="choosed">
        <span> {{firstTitle}}</span>
      </router-link>|
      <!-- <div class="today">
        <span>{{topDataOne?topDataOne.name:"..."}}</span>|
      </div> -->
      <div class="swiper-nav">
        <swiper pandaclass="home-nav-swiper" :pandaobj="pandaobj" :key="topDataEnd.length">
          <!-- <div class="swiper-slide" v-for="data in topDataEnd" :key="data.id">
            {{data.name}}
          </div> -->
          <slot name="todayPath"></slot>
          <router-link :to='{path:"/tab/"+data.id}' tag="div" activeClass="choosed" class="home-nav-item swiper-slide" v-for="data in topDataEnd" :key="data.id">
            {{data.name}}
          </router-link>
        </swiper>
      </div>
      <div class="more">
        <i class="iconfont icon-category" @click="setShow"></i>
      </div>
    </div>
    <div class="nav-home" v-if="subNavShow">
      <p class="title">全部分类 <i class="iconfont icon-close" @click="setHide"></i></p>
      <sub-nav class="sub-nav-home">
        <router-link @click.native="setHide" tag="div" :to='{path:"/tab/"+item.id}' v-for="item in tabList" :key="item.id" class="sub-nav-to" >
          <img class="sub-nav-to-img" :src="item.imageUrl" alt="loading" style="width: 60%;">
          <p style="color: #877a73; font-size: .32rem; margin: 0;">{{item.name}}</p>
        </router-link>
      </sub-nav>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex' // mapState 是vuex提供的切割函数，
import searchInput from '@/components/Search'
import swiper from '@/components/Swiper'
import subNav from '@/components/SubNav'
export default {
  data () {
    return {
      // home: true,
      pandaobj: {
        slidesPerView: 4,
        spaceBetween: 10
      },
      pandaBannerObj: {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      },
      pandaTopObj: {
        slidesPerView: 3
      }
    }
  },
  props: ['firstPath', 'firstTitle'],
  mounted () {
  },
  created () {
    this.tabList.length || this.getTabAction()
  },
  methods: {
    ...mapMutations('tabnav', ['setShow', 'setHide']),
    ...mapActions('tabnav', ['getTabAction'])
  },
  computed: {
    ...mapState('tabnav', ['tabList', 'subNavShow']),
    ...mapState('homedata', ['banners', 'gridsV2', 'topList', 'note', 'cartHomeList']),
    ...mapGetters('tabnav', ['topDataEnd'])
  },
  components: {
    searchInput,
    swiper,
    subNav
  }
}
</script>
